
<% var html={ %>

<div class='row zq-row'>
    <div class="mapQuery">
        <a href="javascript:" class="label label-default" style="float: right" id="collsp">隐藏</a>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">基地</label>
                <div class="layui-input-block">
                    ${farms!}

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">活跃数</label>
                <button class="btn btn-primary" type="button">
                    今日活跃 <span class="badge" id="activeNumber">0</span>
                </button>
                <button class="btn btn-success" type="button">
                    正在工作 <span class="badge" id="nowNumber">0</span>
                </button>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                <label class="layui-form-label">展示农田</label>
                <div class="layui-input-inline" style="width: 60px;">
                    <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchShowFarmLand" lay-text="是|否">
                </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">定位农机</label>
                    <div class="layui-input-inline" id ="machineSelectHtml">

                        </select>
                    </div>
                </div>

            </div>
    </form>
</div>
<div id="googleMap" ></div>

</div>
<% }; %>
<% var js={ %>
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyCttnir7GHS6XxOoIT64aPT_BW9sIXC3q8&sensor=false&libraries=geometry"></script>
<script>
    var showFarmLand = false;
    var interVal;
    var farmIdsShowFarmLand = "";
    layui.use(['form','layer','laydate'], function(){
        var form = layui.form;
        form.on('checkbox(farmId)', function(data){
            var checkeds = $("input[lay-filter='farmId']:checked");
            var farmIds=[];
            $(checkeds).each(function (i,o) {
                farmIds.push(o.value);
            });
            farmIdsShowFarmLand= farmIds.join(",");
            getPosition(farmIds.join(","));
            getActiveNumber(farmIds.join(","));
            window.clearInterval(interVal);
            interVal = window.setInterval(getPosition(farmIds.join(",")), 10 * 1000);
        });

        //监听指定开关
        form.on('switch(switchShowFarmLand)', function(data){
            showFarmLand =this.checked;
            ZqShowMap.init(map,farmIdsShowFarmLand,farmlands,farmlandCenters,showFarmLand);
        });


    });
    function getActiveNumber(farmIds) {
        $.post("/console/wn_machine_device_imei/active/number",{farmIds:farmIds},function (data) {
            if(data.code==1){
               var  activeNumber =  data.data.activeNumber;
                var  nowNumber =  data.data.nowNumber;
                $("#activeNumber").text(activeNumber+"");
                $("#nowNumber").text(nowNumber+"");
            }
        })

    }
    var center = new google.maps.LatLng(39.9054905603894,116.39763216225809);
    var zoom=7;
    var map;
    var markerArr = [];
    var infoWindows=[];
    var farmlands = [];
    var farmlandCenters =[];
    var selectMarker = [];
    /**
     * 清除坐标
     */
    function clearOverlays() {

        if (markerArr) {

            $(markerArr).each(function(i,o){
                o.setMap(null);
            })
        }

    }

    /**
     * 获取坐标
     */
    function getPosition(farmId) {
        var param={

        };
        if(farmId){
            param={
                farmId:farmId
            }
        }
        zqPost("/console/machine/gt06/ponit/json",param,function (data) {
            if (data.code == 1) {
                var listPonit = data.data == undefined ? undefined : data.data;
                if (listPonit.length > 0) {
                    center = new google.maps.LatLng(listPonit[0].lat, listPonit[0].lng);
                }
                var mapProp = {
                    center: center,
                    zoom: zoom,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                };
                if (map != undefined) {
                    clearOverlays();
                } else {
                    map = new google.maps.Map(document.getElementById("googleMap")
                        , mapProp);
                }
                ZqShowMap.init(map,farmId,farmlands,farmlandCenters,showFarmLand);
                if ($(listPonit).length > 0) {
                    markerArr = [];
                    var selectHtml = "<select id=\"machineSelect\" lay-filter=\"machineFilter\" lay-verify=\"\" lay-search><option value=''>请选择农机....</option>";
                    $(listPonit).each(function (i, trackInfo) {
                        var mc = new google.maps.LatLng(trackInfo.lat, trackInfo.lng);
                        var mm = new google.maps.Marker({
                            position: mc,
                            icon: '${ctxPath}' + trackInfo.icon
                        });
                        markerArr.push(mm);
                        mm.setMap(map);
                        var infoMouseover;
                        var infowindow;
                        if("未关联农机"!=trackInfo.data.licensePlateNumber){
                            var html ="<option value='"+trackInfo.lat+","+trackInfo.lng+"'>"+trackInfo.data.licensePlateNumber+"</option>";
                            selectHtml+=html;
                        }
                        infoMouseover = new google.maps.InfoWindow({
                            content: '<p><b>　　机手:</b>' + trackInfo.data.userName + '</p><p><b>　　电话:</b>' + trackInfo.data.userPhoneNumber + '</p><p><b>　　时间:</b>' + trackInfo.data.time + '</p><p><b>　车牌号:</b>' + trackInfo.data.licensePlateNumber + '</p><p><b>　　速度:</b>' + trackInfo.data.speed + '</p>'
                        });
                        infowindow = new google.maps.InfoWindow({
                            content: '<p><b>　　机手:</b>' + trackInfo.data.userName + '</p><p><b>　　电话:</b>' + trackInfo.data.userPhoneNumber + '</p><p><b>　　时间:</b>' + trackInfo.data.time + '</p><p><b>　车牌号:</b>' + trackInfo.data.licensePlateNumber + '</p><p><b>　　速度:</b>' + trackInfo.data.speed + '</p>  <p><b>　　    </b><input type="button" class="btn btn-info btn-xs" value="轨迹回放" onclick="traceView('+trackInfo.data.deviceId+')"></p>'
                        });
                        infoWindows.push(infowindow);
                        google.maps.event.addListener(mm, 'click', function () {
                            closeInfoWindow();
                            infoMouseover.close();
                            infowindow.open(map, mm);
                        });
                        google.maps.event.addListener(mm, 'mouseover', function () {
                            infowindow.close();
                            infoMouseover.open(map, mm);
                        });
                        google.maps.event.addListener(mm, 'mouseout', function () {
                            infoMouseover.close();
                        });
                    });
                    $("#machineSelectHtml").html(selectHtml+"</select>");
                    layui.form.render(); //更新全部
                    layui.form.on('select(machineFilter)', function(data){
                        var value = data.value;
                        if(value!=""){
                            var lln = value.split(",");
                            map.setZoom(20);
                            map.panTo( new google.maps.LatLng(lln[0],lln[1]));
                        }

                    });

                }
            } else {
            }
        });
    }

    $(function($){
        $("#collsp").click(function () {
            if($(this).text()=="隐藏"){
                $(".layui-form").fadeOut(1000);
                $(this).text("显示");
            }else{
                $(".layui-form").fadeIn(1000);
                $(this).text("隐藏");
            }
        })
        var height = $(window).height() - 20;
        var width = $("#googleMap").parent().width();
        $("#googleMap").css("height", height + "px").css("width", width + "px");
        getPosition();
        getActiveNumber();
        interVal = window.setInterval(getPosition, 10 * 1000);
    });

    function traceView(deviceId) {
        window.location = "/console/machine/gt06/trace/page?deviceId="+deviceId;
    }
    function closeInfoWindow(){
        $(infoWindows).each(function (i,o) {
            o.close();
        })
    }
</script>
<% }; %>

<% layout("/view/console/skins/skin_2/layout.html", {js:js,html:html}) {} %>